<template>
  <div class="home">
    <!-- <v-row justify="space-around" no-gutters class="pt-7 px-2 px-sm-16">
      <v-text-field
        v-model="form.search_str"
        class="search-input"
        :label="$t('searchTips')"
        solomy-sm-0
        flat
        dense
        outlined
        hide-details
      />

      <v-btn rounded class="btn mt-5 my-sm-0 ml-4" @click="search">
        {{ $t('search') }}
      </v-btn>
    </v-row> -->
    <v-row style="margin-top: 40px" class="px-2">
      <search-options :form="form" @change="search" />
    </v-row>

    <v-row align="center" no-gutters justify="space-around" class="more-condition px-5 px-sm-16">
      <v-col>
        <v-row>
          <!-- <v-chip-group
            v-show="false"
            v-model="form.seats"
            mandatory
            active-class="red--text lighten-1"
            @change="search"
          >
            <v-chip v-for="tag in tags" :key="tag.name" :value="tag.value">
              {{ tag.name }}
            </v-chip>
          </v-chip-group> -->
          <v-chip-group
            v-model="form.sort"
            mandatory
            active-class="red--text lighten-1"
            @change="search"
          >
            <v-chip v-for="tag in tags2" :key="tag.name" :value="tag.value">
              {{ tag.name }}
            </v-chip>
          </v-chip-group>
        </v-row>
      </v-col>
      <span>{{ carList.length }} {{ $t('availableCars') }}</span>
    </v-row>
    <CarList class="pt-7" style="background: #ffffff" :list="carList" />
  </div>
</template>

<script>
// import dayjs from 'dayjs';
import pageLoadingMixin from '~/plugins/pageLoadingMixin';

export default {
  name: 'SearchCar',
  mixins: [pageLoadingMixin],
  data() {
    return {
      form: {
        search_str: '',
        // start_time: this.$route.query.time || dayjs().startOf('day').format('YYYY-MM-DD HH:mm'),
        // end_time: this.$route.query.time || dayjs().startOf('day').format('YYYY-MM-DD HH:mm'),
        brand: [], // 品牌id
        category: [], // 标签ID
        seats: 0,
        sort: 'price',
        pageNumber: 0,
        pageSize: 9999
      },
      tags: [
        { name: 'ALL', value: 0 },
        { name: '5', value: 5 },
        { name: '7', value: 7 }
      ],
      tags2: [
        { name: this.$t('sortprice'), value: 'price' },
        { name: this.$t('sorttime'), value: 'new' }
      ],
      carList: []
    };
  },
  async fetch() {
    await this.search();
  },
  head() {
    return {
      title: this.$t('searchcar.title'),
      meta: [{ hid: 'description', name: 'description', content: this.$t('searchcar.description') }]
    };
  },
  methods: {
    async search() {
      try {
        const params = {
          ...this.form,
          brand_id: this.form.brand.join(','),
          category_id: this.form.category.join(',')
        };
        delete params.brand;
        delete params.category;
        const res = await this.$api.post('/product/searchList', params);
        this.carList = res.list;
      } catch (error) {
        // console.log(error);
      }
    }
  }
};
</script>
<style scoped lang="scss">
@media screen and (max-width: 600px) {
  .home .search-input {
    width: 100% !important;
  }
}
.search-condition {
  height: 110px;
  background: #ffffff;
  box-shadow: 0px 20px 60px 0px rgba(167, 174, 174, 0.08);
}

.more-condition {
  height: 82px;
  background: #fbfbfb;
}

.btn {
  margin-top: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 200px;
  height: 40px !important;
  background: rgb(252, 246, 246) !important;
  border-radius: 28px;
  border: 1px solid #fad8da;
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 16px;
  color: #e42129;
  line-height: 25px;
  text-align: center;
  font-style: normal;
  box-shadow: none;
}
</style>
